<template>
  <div class="leaseList">
    <div class="leaseListTit center clearfix">
      <i class="iconfont el-icon-arrow-left fl" @click="handleLeaseList"></i>
      <span v-if="!status">{{ $t('tronExchange.rentalListBandwidth') }}</span>
      <span v-else>{{ $t('tronExchange.rentalListEnergy') }}</span>
    </div>
    <div class="leaseListData">
      <el-table
      :data="tableData"
      style="width: 100%">
      <!-- 接收账户 -->
      <el-table-column
        prop="name"
        :label="$t('bosChain.receiveAccountName', {chain: ''})"
        width="150">
        <template slot-scope="scope">
          <span class="gray">{{ handleFormatName(scope.row.to) }}</span>
        </template>
      </el-table-column>
      <!-- 数量 -->
      <el-table-column
        prop="num"
        :label="$t('jy.number')"
        width="180">
        <template slot-scope="scope">
          <span class="gray">{{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <!-- 日期 -->
      <el-table-column
        prop="date"
        :label="$t('tronExchange.frozen') + $t('order.date')"
        width="180">
        <template slot-scope="scope">
          <span class="gray">{{ handleTimeFormat(scope.row.tiem) }}</span>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column
        :label="$t('myWallet.operation')">
        <!-- 解冻 -->
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            v-loading="laodingForlock"
            :disabled="isUnfreezeBalance(scope)"
            @click="handleUnfreezeBalance(scope)">
            {{ $t('tronExchange.frozen') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
  </div>
</template>

<script>
import { EosModel } from '@/utils/eos';
import moment from 'moment';

export default {
  name: 'leaseList', // 冻结列表
  data() {
    return {
      tableData: [],
      laodingForlock: false,
    }
  },
  components: {},
  props: {
    leaseListVisible: Boolean,
    back: Object,
    status: Number, // 0-带宽 1-能量
  },
  watch: {
    leaseListVisible: function change(val) {
      if (val) {
        this.tableData = this.back.list || [];
        this.laodingForlock = false;
      }
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.tableData = this.back.list || [];
  },
  beforeDestroy() {},
  methods: {
    // 解冻
    handleUnfreezeBalance(scope) {
      const params = {
        resource: this.status,
        address: scope.row.from,
        receiver: scope.row.to,
      }
      this.laodingForlock = true;
      EosModel.unfreezeBalance(params, (res) => {
        this.laodingForlock = false;
        if (res && res.result) {
          this.$message.success(this.$t('newpos.successfulOperation'));
          this.tableData.splice(scope.$index, 1);
          if (this.tableData.length === 0) {
            this.$emit('listenLeaseList', '');
          }
          return;
        }
        this.$message.error(res);
      })
    },
    handleLeaseList() {
      this.$emit('listenLeaseList', 'close')
    },
    handleFormatName(name) {
      const accountName = `${name.substring(0, 5)}...${name.substring(name.length - 5, name.length)}`;
      return accountName;
    },
    handleTimeFormat(value) {
      // const zone = moment().zone() / 60; // 时区
      // .add(0 - zone, 'hours')
      return moment(value).format('YYYY/MM/DD HH:mm:ss');
    },
    isUnfreezeBalance(scope) {
      return scope.row.tiem - (new Date().getTime()) > 0;
    }
  },
}
</script>
<style lang="scss" scoped>
.leaseList {
  margin-top: -30px;
  min-height: 400px;

  .leaseListTit {
    i {
      font-size: 24px;
      color: #000;
      cursor: pointer;
    }

    span {
      font-size: 16px;
    }
  }

  .leaseListData {
    margin-top: 10px;
  }
}
</style>

